<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>商品品牌</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="content">
      <!--start 下拉-->
      <div class="add">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_add"></div>
        </transition>
        <transition name="slideDown">
          <div class="specific-search" v-show="vue_add">
            <div class="search-title">
              <p>新增商品品牌</p>
            </div>
            <div class="form">
              <el-row>
                <el-col :span="11">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="品牌名称" prop="brandName">
                      <el-input v-model="ruleForm.brandName"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" :disabled="clickBtn" @click="addOk()">确定</el-button>
                      <el-button @click="addCancel1">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
        </transition>

        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_update"></div>
        </transition>
        <transition name="slideDown">
          <div class="specific-search" v-show="vue_update">
            <div class="search-title">
              <p>修改商品品牌</p>
            </div>
            <div class="form">
              <el-row>
                <el-col :span="11">
                  <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="100px">
                    <el-form-item label="品牌名称" prop="brandName">
                      <el-input v-model="ruleForm1.brandName"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="updateOk()">确定</el-button>
                      <el-button @click="addCancel2">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
        </transition>
      </div>
      <!--end 下拉-->
      <ul class="wrapUl">
        <li class="">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="1">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple textR">
                <el-button type="primary" @click="vue_add=true">新增</el-button>
              </div>
            </el-col>
          </el-row>
        </li>
        <!--<li class="title">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <p>商品品牌</p>
              </div>
            </el-col>
          </el-row>
        </li>-->
        <li class="noWrapUl">
          <ul class="active contentWrap" ref="contentWrap">
            <li v-for="(item,index) in goodsBrandSet.list">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <p ref="liItem">{{item.brandName}}</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple textR setBox">
                    <span @click="updateFn(item.brandName,item.brandCode)"
                          class="iconfont font12 setbtn el-breadcrumb__item__inner">&#xe617;修改</span>
                    <span @click="stickFn(item.brandCode)" class="iconfont font12 setbtn el-breadcrumb__item__inner">&#xe663;置顶</span>
                    <span @click="deleteFn(item.brandCode)" class="iconfont font12 setbtn el-breadcrumb__item__inner">&#xec50;删除</span>
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--end content-->
  </section>
</template>


<script>
  export default {
    data(){
      return {
      	clickBtn:false,                 //请求数据后禁用按钮
        vue_add: false,
        vue_update: false,
        brandCode: '',
        ruleForm: {
          brandName: ''
        },
        ruleForm1: {
          brandName: ''
        },
        rules: {
          name: [
            {required: true, message: '品牌名称不能为空', trigger: 'blur'}
          ]
        },
        goodsBrandSet:{
        	list:[],			//列表数据
					pageTools:{},		//分页数据
					sumInfo:{}
        },
      }
    },
    methods: {
      stickFn(keyId){
        this.axios({
          method: 'PATCH',
          url: '/v3/goods/brands/'+keyId+'/stick'
        }).then((res) => {
        	this.Public.openSuccess(this,"操作成功！");
        	this.queryListAll();
        }).catch((err)=>{
        	this.Public.openError(this,err.response.data)
        });
      },
      deleteFn(keyId) {
        this.$confirm('确认删除此商品品牌？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass:"fr",
          confirmButtonClass:"fr",
          customClass:"clearfixBox"
        }).then(() => {
          //点击确定的回调
          this.axios({
          	  method: 'DELETE',
	  					url: '/v3/goods/brands/'+keyId
         }).then((res) => {
						this.Public.openSuccess(this,"操作成功！")
						this.queryListAll();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data)
					});
		        }).catch(() => {
		          //点击取消的回调
		        });
		    },
      updateFn(name, keyId){
        this.vue_update = true;
        this.brandCode = keyId;
        this.ruleForm1.brandName = name;
      },
      //新增商品确定按钮
      addOk() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            //新增商品品牌数据请求
            this.clickBtn=!this.clickBtn;
            this.axios({
              method: 'POST',
              url: '/v3/goods/brands',
              data: {
                "brandName": this.ruleForm.brandName
              }
            }).then((res) => {
            	this.clickBtn=!this.clickBtn;
	            this.goodsBrandSet.list.unshift(res.data);
	            this.vue_add = false;
	            this.$refs.ruleForm.resetFields();
	            this.Public.openSuccess(this,"操作成功！")
            }).catch((err)=>{
            	this.clickBtn=!this.clickBtn;
            	this.vue_add = false;
            	this.$refs.ruleForm.resetFields();
            	this.Public.openError(this,err.response.data)
            });
          } else {
            return false;
          }
        });
      },
      //修改商品确定按钮
      updateOk() {
        this.$refs.ruleForm1.validate((valid) => {
          if (valid) {
            //新增商品品牌数据请求
            this.axios({
              method: 'PUT',
              url: '/v3/goods/brands/'+this.brandCode,
              data: {
                "brandName": this.ruleForm1.brandName,
                "brandCode": this.brandCode
              }
            }).then((res) => {
            	this.queryListAll();
	            this.vue_update = false;
	            this.$refs.ruleForm1.resetFields();
	            this.Public.openSuccess(this,"操作成功！")
            }).catch((err)=>{
	            this.vue_update = false;
	            this.$refs.ruleForm1.resetFields();
            	this.Public.openError(this,err.response.data)
            });
          } else {
            this.Public.openError('品牌名称不能为空');
            return false;
          }
        });
      },
      //新增商品取消按钮
      addCancel1() {
        this.vue_add = false;
        this.$refs.ruleForm.resetFields();
      },
      //新增商品取消按钮
      addCancel2() {
        this.vue_update = false;
        this.$refs.ruleForm1.resetFields();
      },
      queryListAll(){
      	this.axios({
	        method: 'post',
	        url: "/v3/goods/brands/listAll",
	        data:{}
	      }).then((res) => {
	      	this.goodsBrandSet.list = res.data.list;
	      }).catch((err)=>{
	      	this.Public.openError(this,err.response.data);
	      });
      },
    },
    created(){
    	this.queryListAll();
    },
    mounted(){
      //获取商品品牌数据请求

      document.querySelector(".contentWrap").style.height = (document.documentElement.clientHeight - 180) + 'px';
      window.onresize = () => {
        if( document.querySelector(".contentWrap")){
        	 document.querySelector(".contentWrap").style.height = (document.documentElement.clientHeight - 180) + 'px';
        }
      };
    }


  }
</script>

<style scoped>
  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  div.content ul:not(.active) {
    padding:0 20px 20px 20px;
  }

  .wrapUl > li:not(.noWrapUl) {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6ecf2;
    transition: .2s;
    background-color: #fff;
  }

  div.content ul.active li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6ecf2;
    transition: .2s;
    background-color: #fff;
  }

  div.content ul.active {
    overflow-y: auto;
  }

  div.content ul.active li:hover {
    background-color: #F5F7FC;
  }

  div.content ul.active li:hover div.setBox {
    display: block;
  }

  div.content ul.active li div.setBox {
    display: none;
    padding-right: 10px;
  }

  li p {
    padding-left: 20px;
  }

  .textR {
    text-align: right;
  }

  .font12 {
    font-size: 12px;
  }

  .setbtn {
    margin-left: 30px;
  }

  /* start add */
  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
    /*background-color: rgba(0, 0, 0, .2);*/
  }

  .specific-search {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
  }

  .form {
    width: 1000px;
    background: #fff;
    margin: 20px 0;
  }

  .search-btn {
    margin-top: 50px;
  }

  .specific-search {
    height: 260px;
  }

  /* end add */
  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    opacity: 0;
  }

  div.content ul li.title {
    font-size: 14px;
    background-color: #EEF1F9;
  }
</style>
